<!-- 日历签到组件 -->
<!-- 
引用组件 <calendar-sign ref="sign"></calendar-sign>
打开组件 this.$refs.sign.show();
-->
<template>
	<view class="">
		<u-popup closeable v-model="showPage" mode="center" border-radius="14" width="640rpx">
			<!-- <view class="container">
				<view class="days-row">已累计签到{{totalDays}}天</view>
				<view class="points-row">共获得{{totalPoints}}积分</view>
				<view class="main">
					<view class="month">
						
					</view>
					<view class="calendar">
						
					</view>
					<view class="btn">
						
					</view>
				</view>
			</view> -->
			<view class="u-calendar">
				<view class="u-calendar__header">
					<!-- <view class="u-calendar__header__text" v-if="!$slots['tooltip']">
						{{toolTip}}
					</view>
					<slot v-else name="tooltip" /> -->
					<view class="days-row">已累计签到{{totalDays}}天</view>
					<view class="points-row">共获得{{totalPoints}}积分</view>
				</view>
				<view class="main">
					<view class="u-calendar__action u-flex u-row-center">
						<view class="u-calendar__action__icon">
							<u-icon v-if="changeYear" name="arrow-left-double" :color="yearArrowColor" @click="changeYearHandler(0)"></u-icon>
						</view>
						<view class="u-calendar__action__icon">
							<u-icon v-if="changeMonth" name="arrow-left" :color="monthArrowColor" @click="changeMonthHandler(0)"></u-icon>
						</view>
						<view class="u-calendar__action__text">{{ showTitle }}</view>
						<view class="u-calendar__action__icon">
							<u-icon v-if="changeMonth" name="arrow-right" :color="monthArrowColor" @click="changeMonthHandler(1)"></u-icon>
						</view>
						<view class="u-calendar__action__icon">
							<u-icon v-if="changeYear" name="arrow-right-double" :color="yearArrowColor" @click="changeYearHandler(1)"></u-icon>
						</view>
					</view>
					<view class="u-calendar__week-day">
						<view class="u-calendar__week-day__text" v-for="(item, index) in weekDayZh" :key="index">{{item}}</view>
					</view>
					<view class="u-calendar__content">
						<!-- 前置空白部分 -->
						<block v-for="(item, index) in weekdayArr" :key="index">
							<view class="u-calendar__content__item"></view>
						</block>
						<view class="u-calendar__content__item" :class="{
							'u-hover-class':openDisAbled(year,month,index+1),
							'u-calendar__content--start-date': (mode == 'range' && startDate==`${year}-${month}-${index+1}`) || mode== 'date',
							'u-calendar__content--end-date':(mode== 'range' && endDate==`${year}-${month}-${index+1}`) || mode == 'date'
						}" :style="{backgroundColor: getColor(index,1)}" v-for="(item, index) in daysArr" :key="index"
						 @tap="dateClick(index)">
							<view class="u-calendar__content__item__inner" :style="{color: getColor(index,2)}">
								<view>{{ index + 1 }}</view>
							</view>
							<view class="u-calendar__content__item__tips" :style="{color:activeColor}" v-if="mode== 'range' && startDate==`${year}-${month}-${index+1}` && startDate!=endDate">{{startText}}</view>
							<view class="u-calendar__content__item__tips" :style="{color:activeColor}" v-if="mode== 'range' && endDate==`${year}-${month}-${index+1}`">{{endText}}</view>
						</view>
						<view class="u-calendar__content__bg-month">{{month}}</view>
					</view>
					<view class="u-calendar__bottom">
						<view class="u-calendar__bottom__choose">
							<text>{{mode == 'date' ? activeDate : startDate}}</text>
							<text v-if="endDate">至{{endDate}}</text>
						</view>
						<view class="u-calendar__bottom__btn">
							<!-- <u-button :type="btnType" shape="circle" size="default" @click="btnFix(false)">{{btnText}}</u-button> -->
							<u-button :type="btnType" shape="circle" size="default" @click="submit" :disabled="disabled" :loading="loading">{{btnText}}</u-button>
						</view>
					</view>
				</view>
				
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		name:"calendar-sign",
		props: {
			safeAreaInsetBottom: {
				type: Boolean,
				default: false
			},
			// 是否允许通过点击遮罩关闭Picker
			maskCloseAble: {
				type: Boolean,
				default: true
			},
			// 通过双向绑定控制组件的弹出与收起
			value: {
				type: Boolean,
				default: false
			},
			// 弹出的z-index值
			zIndex: {
				type: [String, Number],
				default: 0
			},
			// 是否允许切换年份
			changeYear: {
				type: Boolean,
				// default: true
				default: false
			},
			// 是否允许切换月份
			changeMonth: {
				type: Boolean,
				// default: true
				default: false
			},
			// date-单个日期选择，range-开始日期+结束日期选择
			mode: {
				type: String,
				default: 'date'
			},
			// 可切换的最大年份
			maxYear: {
				type: [Number, String],
				default: 2050
			},
			// 可切换的最小年份
			minYear: {
				type: [Number, String],
				default: 1950
			},
			// 最小可选日期(不在范围内日期禁用不可选)
			minDate: {
				type: [Number, String],
				default: '1950-01-01'
			},
			/**
			 * 最大可选日期
			 * 默认最大值为今天，之后的日期不可选
			 * 2030-12-31
			 * */
			maxDate: {
				type: [Number, String],
				default: ''
			},
			// 弹窗顶部左右两边的圆角值
			borderRadius: {
				type: [String, Number],
				default: 20
			},
			// 月份切换按钮箭头颜色
			monthArrowColor: {
				type: String,
				default: '#606266'
			},
			// 年份切换按钮箭头颜色
			yearArrowColor: {
				type: String,
				default: '#909399'
			},
			// 默认日期字体颜色
			color: {
				type: String,
				default: '#303133'
			},
			// 选中|起始结束日期背景色
			activeBgColor: {
				type: String,
				// default: '#2979ff'
				default: 'orange'
			},
			// 选中|起始结束日期字体颜色
			activeColor: {
				type: String,
				default: '#ffffff'
			},
			// 范围内日期背景色
			rangeBgColor: {
				type: String,
				default: 'rgba(41,121,255,0.13)'
			}, 
			// 范围内日期字体颜色
			rangeColor: {
				type: String,
				default: '#2979ff'
			},
			// mode=range时生效，起始日期自定义文案
			startText: {
				type: String,
				default: '开始'
			},
			// mode=range时生效，结束日期自定义文案
			endText: {
				type: String,
				default: '结束'
			},
			//按钮样式类型
			btnType: {
				type: String,
				// default: 'primary'
				default: 'warning'
			},
			// 当前选中日期带选中效果
			isActiveCurrent: {
				type: Boolean,
				default: true
			},
			// 切换年月是否触发事件 mode=date时生效
			isChange: {
				type: Boolean,
				default: false
			},
			// 是否显示右上角的关闭图标
			closeable: {
				type: Boolean,
				default: true
			},
			// 顶部的提示文字
			toolTip: {
				type: String,
				default: '选择日期'
			}
		},
		data() {
			return {
				showPage: false,
				disabled: false,
				loading: false,
				
				// height: 600,
				height: 0,
				
				totalDays: 0, // 已累计签到天数
				totalPoints: 0, // 已累计获得积分
				signHisList: [],
				
				btnText: '签到',
				
				// 星期几,值为1-7
				weekday: 1, 
				weekdayArr:[],
				// 当前月有多少天
				days: 0, 
				daysArr:[],
				showTitle: '',
				year: 2020,
				month: 0,
				day: 0,
				startYear: 0,
				startMonth: 0,
				startDay: 0,
				endYear: 0,
				endMonth: 0,
				endDay: 0,
				today: '',
				activeDate: '',
				startDate: '',
				endDate: '',
				isStart: true,
				min: null,
				max: null,
				weekDayZh: ['日', '一', '二', '三', '四', '五', '六']
			};
		},
		computed: {
			dataChange() {
				return `${this.mode}-${this.minDate}-${this.maxDate}`;
			},
			uZIndex() {
				// 如果用户有传递z-index值，优先使用
				return this.zIndex ? this.zIndex : this.$u.zIndex.popup;
			}
		},
		watch: {
			dataChange(val) {
				this.init()
			}
		},
		created() {
			this.init()
		},
		mounted(){
			
		},
		show(){
			
		},
		methods: {
			// 外部调用，打开弹窗
			show(){
				this.showPage = true;
				this.initPage();
			},
			// 页面初始化
			initPage() {
				this.calcPage();
				this.getTotalDays();
				this.getTotalPoints();
				this.getSignHis();
			},
			// 计算页面高度
			calcPage() {
				let height = 0; //定义动态的高度变量
				let statusbar = 0; // 动态状态栏高度
				uni.getSystemInfo({ // 获取当前设备的具体信息
					success: (sysinfo) => {
						console.log('设备的具体信息', sysinfo)
						statusbar = sysinfo.statusBarHeight;
						height = sysinfo.windowHeight;
						console.log('窗体高度', height, '状态栏', statusbar)
					}
				});
			},
			// 取签到天数
			getTotalDays(){
				this.totalDays = 5;
			},
			// 取签到积分数
			getTotalPoints(){
				this.totalPoints = 80;
			},
			// 取本月签到历史
			getSignHis(){
				this.signHisList = ["2025-04-01", "2025-04-02", "2025-04-11", "2025-04-12", "2025-04-13", "2025-04-15"]
				let now = this.$u.timeFormat(new Date().getTime(), 'yyyy-mm-dd');
				if(this.signHisList.includes(now)){
					this.btnText = "已签到"
					this.disabled = true;
				}
				this.getHisColor();
			},
			// 设置签到历史颜色
			getHisColor(){
				let dayArr = [];
				let year=this.year,month=this.month,day=this.day;
				console.log('now',year, month, day, this.days);
				this.signHisList.forEach(item => {
					let [y,m,d] = item.split("-")
					dayArr.push(Number(d))
				})
				// console.log('this.signHisList',this.signHisList);
				// console.log('dayArr',dayArr);
				this.signHisList = dayArr
				
			},
			// 提交并关闭
			submit(){
				console.log('提交并关闭', this.activeDate);
				console.log('save date', this.$u.timeFormat(new Date().getTime(), 'yyyy-mm-dd'));
				uni.showToast({
					title: '签到成功，请明天再来签到',
					icon: 'none',
					success: ()=>{
						// setTimeout(function(){
						// 	this.showPage = false;
						// }, 2000)
						setTimeout(()=>{
							this.showPage = false;
						}, 2000)
					}
				})
				
			},
			
			getColor(index, type) {
				let color = type == 1 ? '' : this.color;
				let day = index + 1
				let date = `${this.year}-${this.month}-${day}`
				let timestamp = new Date(date.replace(/\-/g, '/')).getTime();
				let start = this.startDate.replace(/\-/g, '/')
				let end = this.endDate.replace(/\-/g, '/')
				if ((this.isActiveCurrent && this.activeDate == date) || this.startDate == date || this.endDate == date) {
					color = type == 1 ? this.activeBgColor : this.activeColor;
				} else if (this.endDate && timestamp > new Date(start).getTime() && timestamp < new Date(end).getTime()) {
					color = type == 1 ? this.rangeBgColor : this.rangeColor;
				}
				// 增加对已签到的处理
				
				if(this.signHisList.indexOf(day) >= 0){
					color = type == 1 ? '#f5d595' : '#fff';
				}
				// console.log(day, color)
				
				return color;
			},
			init() {
				let now = new Date();
				this.year = now.getFullYear();
				this.month = now.getMonth() + 1;
				this.day = now.getDate();
				this.today = `${now.getFullYear()}-${now.getMonth() + 1}-${now.getDate()}`;
				this.activeDate = this.today;
				this.min = this.initDate(this.minDate);
				this.max = this.initDate(this.maxDate || this.today);
				this.startDate = "";
				this.startYear = 0;
				this.startMonth = 0;
				this.startDay = 0;
				this.endYear = 0;
				this.endMonth = 0;
				this.endDay = 0;
				this.endDate = "";
				this.isStart = true;
				this.changeData();
			},
			//日期处理
			initDate(date) {
				let fdate = date.split('-');
				return {
					year: Number(fdate[0] || 1920),
					month: Number(fdate[1] || 1),
					day: Number(fdate[2] || 1)
				}
			},
			openDisAbled: function(year, month, day) {
				let bool = true;
				let date = `${year}/${month}/${day}`;
				// let today = this.today.replace(/\-/g, '/');
				let min = `${this.min.year}/${this.min.month}/${this.min.day}`;
				let max = `${this.max.year}/${this.max.month}/${this.max.day}`;
				let timestamp = new Date(date).getTime();
				if (timestamp >= new Date(min).getTime() && timestamp <= new Date(max).getTime()) {
					bool = false;
				}
				return bool;
			},
			generateArray: function(start, end) {
				return Array.from(new Array(end + 1).keys()).slice(start);
			},
			formatNum: function(num) {
				return num < 10 ? '0' + num : num + '';
			},
			//一个月有多少天
			getMonthDay(year, month) {
				let days = new Date(year, month, 0).getDate();
				return days;
			},
			getWeekday(year, month) {
				let date = new Date(`${year}/${month}/01 00:00:00`);
				return date.getDay();
			},
			checkRange(year) {
				let overstep = false;
				if (year < this.minYear || year > this.maxYear) {
					uni.showToast({
						title: "日期超出范围啦~",
						icon: 'none'
					})
					overstep = true;
				}
				return overstep;
			},
			changeMonthHandler(isAdd) {
				if (isAdd) {
					let month = this.month + 1;
					let year = month > 12 ? this.year + 1 : this.year;
					if (!this.checkRange(year)) {
						this.month = month > 12 ? 1 : month;
						this.year = year;
						this.changeData();
					}
			
				} else {
					let month = this.month - 1;
					let year = month < 1 ? this.year - 1 : this.year;
					if (!this.checkRange(year)) {
						this.month = month < 1 ? 12 : month;
						this.year = year;
						this.changeData();
					}
				}
			},
			changeYearHandler(isAdd) {
				let year = isAdd ? this.year + 1 : this.year - 1;
				if (!this.checkRange(year)) {
					this.year = year;
					this.changeData();
				}
			},
			changeData() {
				this.days = this.getMonthDay(this.year, this.month);
				this.daysArr=this.generateArray(1,this.days)
				this.weekday = this.getWeekday(this.year, this.month);
				this.weekdayArr=this.generateArray(1,this.weekday)
				this.showTitle = `${this.year}年${this.month}月`;
				if (this.isChange && this.mode == 'date') {
					this.btnFix(true);
				}
				console.log("changeData", this.daysArr);
			},
			dateClick: function(day) {
				// day += 1;
				// if (!this.openDisAbled(this.year, this.month, day)) {
				// 	this.day = day;
				// 	let date = `${this.year}-${this.month}-${day}`;
				// 	if (this.mode == 'date') {
				// 		this.activeDate = date;
				// 	} else {
				// 		let compare = new Date(date.replace(/\-/g, '/')).getTime() < new Date(this.startDate.replace(/\-/g, '/')).getTime()
				// 		if (this.isStart || compare) {
				// 			this.startDate = date;
				// 			this.startYear = this.year;
				// 			this.startMonth = this.month;
				// 			this.startDay = this.day;
				// 			this.endYear = 0;
				// 			this.endMonth = 0;
				// 			this.endDay = 0;
				// 			this.endDate = "";
				// 			this.activeDate = "";
				// 			this.isStart = false;
				// 		} else {
				// 			this.endDate = date;
				// 			this.endYear = this.year;
				// 			this.endMonth = this.month;
				// 			this.endDay = this.day;
				// 			this.isStart = true;
				// 		}
				// 	}
				// }
			},
			close() {
				// 修改通过v-model绑定的父组件变量的值为false，从而隐藏日历弹窗
				this.$emit('input', false);
			},
			getWeekText(date) {
				date = new Date(`${date.replace(/\-/g, '/')} 00:00:00`);
				let week = date.getDay();
				return '星期' + ['日', '一', '二', '三', '四', '五', '六'][week];
			},
			
			btnFix(show) {
			// 	if (!show) {
			// 		this.close();
			// 	}
			// 	if (this.mode == 'date') {
			// 		let arr = this.activeDate.split('-')
			// 		let year = this.isChange ? this.year : Number(arr[0]);
			// 		let month = this.isChange ? this.month : Number(arr[1]);
			// 		let day = this.isChange ? this.day : Number(arr[2]);
			// 		//当前月有多少天
			// 		let days = this.getMonthDay(year, month);
			// 		let result = `${year}-${this.formatNum(month)}-${this.formatNum(day)}`;
			// 		let weekText = this.getWeekText(result);
			// 		let isToday = false;
			// 		if (`${year}-${month}-${day}` == this.today) {
			// 			//今天
			// 			isToday = true;
			// 		}
			// 		this.$emit('change', {
			// 			year: year,
			// 			month: month,
			// 			day: day,
			// 			days: days,
			// 			result: result,
			// 			week: weekText,
			// 			isToday: isToday,
			// 			// switch: show //是否是切换年月操作
			// 		});
			// 	} else {
			// 		if (!this.startDate || !this.endDate) return;
			// 		let startMonth = this.formatNum(this.startMonth);
			// 		let startDay = this.formatNum(this.startDay);
			// 		let startDate = `${this.startYear}-${startMonth}-${startDay}`;
			// 		let startWeek = this.getWeekText(startDate)
			
			// 		let endMonth = this.formatNum(this.endMonth);
			// 		let endDay = this.formatNum(this.endDay);
			// 		let endDate = `${this.endYear}-${endMonth}-${endDay}`;
			// 		let endWeek = this.getWeekText(endDate);
			// 		this.$emit('change', {
			// 			startYear: this.startYear,
			// 			startMonth: this.startMonth,
			// 			startDay: this.startDay,
			// 			startDate: startDate,
			// 			startWeek: startWeek,
			// 			endYear: this.endYear,
			// 			endMonth: this.endMonth,
			// 			endDay: this.endDay,
			// 			endDate: endDate,
			// 			endWeek: endWeek
			// 		});
			// 	}
			}
		}
	}
</script>

<style scoped>
	.container{
		/* width: 750rpx; */
		/* width: 640rpx; */
		background-color: darkorange;
	}
	.days-row{
		padding: 30rpx 20rpx;
		font-size: 36rpx;
		color: #fff;
	}
	.points-row{
		padding: 6rpx 20rpx;
		font-size: 28rpx;
		color: #fff;
	}
	.main{
		margin-top: 40rpx;
		background-color: #fff;
		border-radius: 20rpx;
	}
</style>
<style scoped lang="scss">
	@import "@/uni_modules/vk-uview-ui/libs/css/style.components.scss";
	
	.u-calendar {
		color: $u-content-color;
		background-image: linear-gradient(105deg, red, orange);
		padding: 30rpx;
		
		&__header {
			width: 100%;
			box-sizing: border-box;
			font-size: 30rpx;
			// background-color: #fff;
			color: $u-main-color;
			
			&__text {
				margin-top: 30rpx;
				padding: 0 60rpx;
				@include vue-flex;
				justify-content: center;
				align-items: center;
			}
		}
		
		&__action {
			padding: 40rpx 0 40rpx 0;
			
			&__icon {
				margin: 0 16rpx;
			}
			
			&__text {
				padding: 0 16rpx;
				color: $u-main-color;
				font-size: 32rpx;
				line-height: 32rpx;
				font-weight: bold;
			}
		}
	
		&__week-day {
			@include vue-flex;
			align-items: center;
			justify-content: center;
			padding: 6px 0;
			overflow: hidden;
			
			&__text {
				flex: 1;
				text-align: center;
			}
		}
	
		&__content {
			width: 100%;
			@include vue-flex;
			flex-wrap: wrap;
			padding: 6px 0;
			box-sizing: border-box;
			background-color: #fff;
			position: relative;
			
			&--end-date {
				border-top-right-radius: 8rpx;
				border-bottom-right-radius: 8rpx;
			}
			
			&--start-date {
				border-top-left-radius: 8rpx;
				border-bottom-left-radius: 8rpx;
			}
			
			&__item {
				width: 14.2857%;
				@include vue-flex;
				align-items: center;
				justify-content: center;
				padding: 6px 0;
				overflow: hidden;
				position: relative;
				z-index: 2;
				
				&__inner {
					height: 84rpx;
					@include vue-flex;
					align-items: center;
					justify-content: center;
					flex-direction: column;
					font-size: 32rpx;
					position: relative;
					border-radius: 50%;
					
					&__desc {
						width: 100%;
						font-size: 24rpx;
						line-height: 24rpx;
						transform: scale(0.75);
						transform-origin: center center;
						position: absolute;
						left: 0;
						text-align: center;
						bottom: 2rpx;
					}
				}
				
				&__tips {
					width: 100%;
					font-size: 24rpx;
					line-height: 24rpx;
					position: absolute;
					left: 0;
					transform: scale(0.8);
					transform-origin: center center;
					text-align: center;
					bottom: 8rpx;
					z-index: 2;
				}
			}
			
			&__bg-month {
				position: absolute;
				font-size: 130px;
				line-height: 130px;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				color: #e4e7ed;
				z-index: 1;
			}
		}
	
		&__bottom {
			width: 100%;
			@include vue-flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			background-color: #fff;
			padding: 0 40rpx 30rpx;
			box-sizing: border-box;
			font-size: 24rpx;
			color: $u-tips-color;
			
			&__choose {
				height: 50rpx;
			}
			
			&__btn {
				width: 100%;
			}
		}
	}
	
	::v-deep .u-calendar__content__item{
		padding: 0 !important;
		border-radius: 50% !important; 
		scale: 85%;
	}
</style>